<template xmlns:el-col="http://www.w3.org/1999/html" xmlns:el-table="http://www.w3.org/1999/html">
  <div class="container">
    <el-row>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item style="margin-left: 30px" >首页&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</el-breadcrumb-item>
        <el-breadcrumb-item style="margin-left: 30px">基础信息管理&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</el-breadcrumb-item>
        <el-breadcrumb-item style="margin-left: 30px">快递管理&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row>
      <el-form label-width="80px">
        <el-row>
          <el-col :span="8" style="margin-top: 10px">
            <el-form-item label="用户名" label-width="80px">
              <el-input style="height: 8%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="margin-top: 10px">
            <el-form-item label="用户权限" label-width="80px">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="margin-top: 10px">
            <el-form-item>
              <el-button type="success" style="background-color: cornflowerblue">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <el-row>
      <el-button-group>

        <el-button @click="btnAddClick" type="primary">
          <i aria-hidden="true" class="fa fa-plus">添加</i>
          <!--          <el-button type="text" @click="dialogFormVisible = true">添加收货地址</el-button>-->
        </el-button>

        <el-button type="warning">
          <i aria-hidden="true">修改</i></el-button>

        <el-button type="danger" >
          <i aria-hidden="true">删除</i></el-button>

      </el-button-group>

      <el-table :data="tableData"
                border
                stripe
                style="width :100%;height: 60%">
        <el-table-column
          prop="name"
          label="姓名"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
        ></el-table-column>
        <el-table-column
          prop="expresscompany"
          label="快递公司">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
        <el-table-column
          prop="number"
          label="快递编号">
        </el-table-column>
        <el-table-column
          prop="datetime"
          label="日期">
        </el-table-column>
      </el-table>
      <el-pagination
        small
        layout="prev,pager,next"
        :total="50"
      ></el-pagination>
    </el-row>

    <el-button type="text" @click="dialogTableVisible = true">查看快递信息</el-button>





    <!-- Form -->
    <el-button type="text" @click="dialogFormVisible = true">添加收货地址</el-button>

    <el-dialog title="收货地址"
               :visible.sync="dialogFormVisible"
               :before-close="handleClose">
      <el-form >
        <el-form-group>
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="Logistics.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form-group>
        <el-form-group>
          <el-form-item label="电话号码" :label-width="formLabelWidth">
            <el-input v-model="Logistics.phone" autocomplete="off"></el-input>
          </el-form-item>
        </el-form-group>
        <el-form-group>
          <el-form-item label="收货地址" :label-width="formLabelWidth">
            <el-input v-model="Logistics.address" autocomplete="off"></el-input>
          </el-form-item>
        </el-form-group>
      </el-form>
      <span class="dialog-footer" slot="footer" >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button @click="sumbmitHandle" type="primary" >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Logistics", data(){
      return{
        tableData:[],
        gridData:[],
        dialogTableVisible: false,
        dialogFormVisible: false,
        formLabelWidth: '120px',
        express:{
          name:'',
          phone:'',
          address:{},
          status:''
        },Logistics:{
          name:'',
          phone:'',
          address:{},
          status:''
        }
      }
    },mounted() {
      /*挂载结束之后*/
      var _this=this;
      this.axios({
        url:'http://localhost:3000/logistics/list',
        method:'get'
      }).then(function (res) {
        console.log(res.data);
        _this.tableData=res.data;
      })
    },
    methods:{
      handleClose(){
        this.dialogFormVisible=false;
      },btnAddClick(){

      },
      sumbmitHandle(){
        var _this=this;
        this.axios({
          url:'http://127.0.0.1:3000/logistics/add',
          method:'get',
          params:{
            name:this.Logistics.name,
            phone:this.Logistics.phone,
            address:this.Logistics.address
          }
        }).then(function (res) {
          if(res.data.flag){
            _this.gridData=res.data.exp;
            _this.$message('添加成功')
            _this.dialogFormVisible=false;
          }else{
            alert('添加失败');
          }
        })
      }
    }
  }
</script>

<style scoped>

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }


</style>
